<template>
  <!-- 主煤流运行监测 -->
  <HerinContainer class="MainCoal-box" :delay="1" direction="Right" title="带式输送机监测">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="content-top">
        <div class="top-left">
          <span class="top-left-span">带式输送机总长度</span>
        </div>
        <div class="top-right">
          <span class="top-right-num">8,828</span><span class="company">m</span>
        </div>
      </div>
      <div class="content-center">
        <div class="center-select">
          <HerinSelect v-model="selectPump1" :options="selectOption1" :width="130" :height="28"></HerinSelect>
          <HerinSelect v-model="selectPump2" :options="selectOption2" :width="190" :height="28"></HerinSelect>
        </div>
        <div class="status">
          <span class="status-bg">运行</span>
          <span class="status-title">主斜井带式输送机</span>
        </div>
        <div class="center">
          <div class="center-item" v-for="(item,index) in cateLists" :key="index">
            <div><span class="num">{{item.num}}</span><span class="cam">{{item.cam}}</span></div>
            <div><span class="title">{{item.title}}</span></div>
          </div>
        </div>
        <MouldBox class="box1" :datas="hourLists" :chartOption="hourOptions" chartTitle="近24小时带式输送机速度分析" :text="['输送机速度']" height="9.375rem"></MouldBox>
        <MouldBox :datas="dayLists" :chartOption="dayOptions" chartTitle="近30天带式输送机工作时长分析" :text="['工作时长']" height="9.375rem"></MouldBox>
      </div>

    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import MouldBox from '../common/MouldBox.vue';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';
export default {

  components: {
    HerinContainer,
    MouldBox,
    HerinSelect
  },
  data() {
    return {
      // 第一个选择框
      selectPump1: '',
      selectOption1: [],
      // 第二个选择框
      selectPump2: '',
      selectOption2: [],
      // 24小时数据
      hourLists: [
        { x: '00:00', y: 1.2, s: '输送机速度' },
        { x: '10:00', y: 0.2, s: '输送机速度' },
        { x: '80:00', y: 3.2, s: '输送机速度' },
        { x: '12:00', y: 4.2, s: '输送机速度' },
        { x: '16:00', y: 1.0, s: '输送机速度' },
        { x: '20:00', y: 2.1, s: '输送机速度' },
        { x: '24:00', y: 1.2, s: '输送机速度' }
      ],
      hourOptions: {
        color: ['#00EFF3'],
        area: false,
        unit: 'm/s'
      },
      // 近30天数据
      dayLists: [
        { x: '12-01', y: 75, s: '工作时长' },
        { x: '12-06', y: 30, s: '工作时长' },
        { x: '12-11', y: 60, s: '工作时长' },
        { x: '12-16', y: 37, s: '工作时长' },
        { x: '12-21', y: 79, s: '工作时长' },
        { x: '12-26', y: 42, s: '工作时长' },
        { x: '12-31', y: 67, s: '工作时长' }
      ],
      dayOptions: {
        color: ['#51F0A2'],
        area: true,
        unit: 'h'
      }
    };
  },
  computed: {
    cateLists() {
      return [
        { title: '温度', num: '13', cam: '℃' },
        { title: '速度', num: '4.4', cam: 'm/s' },
        { title: '功率', num: '2*160', cam: 'KW' },
        { title: '电流', num: '55', cam: 'A' },
        { title: '连续运行时长', num: '63', cam: 'H' },
        { title: '额定功率', num: '800', cam: 'KW' }
      ];
    }
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  &-content{
    .company{
      color: #838383;
      font-size: .75rem;
    }
    .content-top{
      width:20.625rem ;
      height: 2.125rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .9375rem;
      background-color: #1D2E45;
      border-radius: .25rem;
      padding: .9375rem;
      box-sizing: border-box;
      .top-left{
        .top-left-span{
          font-size: .875rem;
          color: #F8F8F8;
          vertical-align:middle;
        }
      }
      .top-right-num{
        color: #F8F8F8;
        font-size: 1rem;
        margin-right: .3125rem;
      }
    }
    .content-center{
      width:20.625rem ;
      .box1{
        margin-bottom: .625rem;
      }
      .center-select{
        display: flex;
        justify-content: space-between;
        margin-bottom: .9375rem;
      }
      .status{
        text-align: left;
        margin-bottom: .9375rem;
        height: 1.125rem;
        .status-bg{
          text-align: center;
          font-size: .875rem;
          color: #4BDF98;
          margin-right: .625rem;
          background-color: #18514E;
          padding: 0 .3125rem;
          box-sizing: border-box;
        }
        .status-title{
          color: #F8F8F8;
          font-size: 1rem;
        }
      }
      .center{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .center-item{
          width: 6.25rem;
          height: 3.125rem;
          text-align: center;
          font-size: .75rem;
          line-height: 1.25rem;
          background-color: #1D2E45;
          border-radius: .25rem;
          margin-bottom: .625rem;
          padding: .375rem 0;
          box-sizing: border-box;
          .num{
            color: #1ED9FF;
            margin-right: .3125rem;
          }
          .cam{
            color: #E5E5E6;
          }
          .title{
            color:#D5D7D9;
          }
        }
      }

    }
    .content-category{
      text-align: left;
      color: #D9D9D9;
      font-size: .875rem;
      margin-left: .9375rem;
      margin-top: .625rem;
      margin-bottom: .625rem;
    }
  }
}
</style>
